<!doctype html>
<html>
<head>
</head>
<body>

<div id="screens"></div>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.2.min.js"></script>
<script>
	$(function(){
		var h = '<iframe id="{0}" src="index.htm" style="width:{1}px;height:{2}px"></iframe>',
			$s = $('#screens'),
			r = [
				{ name:'ios landscape', width:480,  height:320 },
				{ name:'ios portrait',  width:320,  height:480 },
				{ name:'wp landscape',  width:800,  height:480 },
				{ name:'wp portrait',   width:480,  height:800 },
				{ name:'desktop',       width:1024, height:768 }
			];
		for(var i=0; i<r.length; i++){
			$s.append(h
				.replace('{0}', r[i].name.replace(' ', '-'))
				.replace('{1}', r[i].width)
				.replace('{2}', r[i].height));
		}
	});
</script>

</body>
</html>